<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0, viewport-fit=cover" />
    <title>小程序分享地址转换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }

        html,
        body {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        input {
            background: none;
            outline: none;
            border: none;
        }

        .title {
            padding: 30px 0;
            text-align: center;
            font-size: 20px;
        }

        .inputBox {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 30px;
        }

        .inputBox input {
            width: 500px;
            border-bottom: 1px solid red;
            font-size: 15px;
            line-height: 15px;
            height: 30px;
        }

        .tipOne {
            color: #ff3838;
            text-align: center;
        }

        .tip1 {
            color: #ff3838;
            margin-top: 15px;
            text-align: center;
        }

        .resultBox {
            width: 500px;
            margin: 30px auto;
        }

        .res {
            width: 500px;
            margin-top: 15px;
            word-wrap: break-word;
        }

        .copy {
            margin-top: 15px;
            text-align: right;
            color: #ff3838;
        }

        .tipBox {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 50px;
            line-height: 50px;
            color: #fff;
            background: rgba(0, 0, 0, .9);
            text-align: center;
            border-radius: 5px;
        }

        .checkBox {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 15px;
        }

        .radioBox {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
    <script src="vue.min.js"></script>
</head>

<body>

    <div class="wrapper" id="app">

        <div class="title">分享地址转换 （携带参数）</div>

        <div class="tipOne">例如 问答详情： /pages/qandaDetail2?id=(你的问答id)</div>
        <div class="tip1">? 的后面是进入该页面需要的参数 多个参数 请用 & 连接 例如 id=xxx&wxShare=true</div>


        <div class="inputBox">
            <input type="text" v-model="url" :value="url" @input="getRes" placeholder="请输入您要转换的完整地址(携带参数)" />
        </div>

        <div class="checkBox">
            <input type="checkbox" id="haveParams" value="Jack" v-model="haveParams" style="margin-right: 5px;">
            <label for="haveParams" style="margin-right: 25px;">地址有其余参数</label>


            <div class="radioBox">
                <input type="radio" id="wxShare" value="wxShare" v-model="radioVal" style="margin-right: 5px;">
                <label for="wxShare" style="margin-right: 25px;">微信分享</label>
                <input type="radio" id="gzhwzShare" value="gzhwzShare" v-model="radioVal" style="margin-right: 5px;">
                <label for="gzhwzShare">公众号文章</label>
            </div>


        </div>

        <div class="resultBox">
            <div class="tipTxt">转换结果如下：</div>
            <div class="res">{{result}}</div>
            <div class="copy" v-if="result" @click="copyRes">点击复制</div>
        </div>


        <div v-if="isCopy" class="tipBox">复制成功</div>

    </div>

    <script>
        var vue = new Vue({
            //绑定的元素
            el: '#app',
            //页面中所有的变量都写在这里
            data: {
                url: "",
                result: "",
                isCopy: false,
                haveParams: true,
                radioVal: 'gzhwzShare',
                otherParams: ''
            },
            watch: {
                haveParams() {
                    if (this.url != '') {
                        if (!this.haveParams) {
                            let wh1 = this.url.indexOf('?');
                            if (wh1 != -1) {
                                let wh2 = this.url.indexOf('&');

                                this.otherParams = this.url.substring(wh1, wh2 != -1 ? wh2 : this.url
                                    .length);
                                this.url = this.url.substring(0, wh1);
                            }

                            this.judge();
                        } else {
                            let wh2 = this.url.indexOf('?');
                            this.url = this.url.substring(0, wh2);
                            if (this.otherParams != '') {
                                this.url += this.otherParams;
                                this.otherParams = '';
                                this.judge();
                            }
                        }

                        this.updateUrl();
                    }
                },
                radioVal() {
                    if (this.url != '') {
                        console.log('---this.radioVal---', this.radioVal);
                        this.judge();
                        this.updateUrl();
                    }
                }
            },
            //页面中所的方法都写在这里
            methods: {
                getRes() {
                    if (this.url != '') {

                        if (this.url.indexOf('?') != -1) {
                            let wh = this.url.indexOf('?');
                            this.url = this.url.substring(0, wh);
                        }

                        this.url = this.url.replace('.html', '');
                        this.judge();
                        this.result = '/pages/index?goUrl=' + encodeURIComponent('/' + this.url)
                    } else {
                        this.result = '';
                    }
                },
                updateUrl() {
                    this.result = '/pages/index?goUrl=' + encodeURIComponent('/' + this.url);
                },
                judge() {
                    if (this.haveParams) {
                        if (this.radioVal == 'wxShare') {
                            if (this.url.indexOf('gzhwzShare') != -1) {
                                this.url = this.url.replace('gzhwzShare', 'wxShare');
                            } else {
                                this.url += '&wxShare=true';
                            }
                        }
                        if (this.radioVal == 'gzhwzShare') {
                            if (this.url.indexOf('wxShare') != -1) {
                                this.url = this.url.replace('wxShare', 'gzhwzShare');
                            } else {
                                this.url += '&gzhwzShare=true';
                            }
                        }
                    } else {
                        if (this.radioVal == 'wxShare') {
                            if (this.url.indexOf('gzhwzShare') != -1) {
                                this.url = this.url.replace('gzhwzShare', 'wxShare');
                            } else {
                                this.url += '?wxShare=true';
                            }
                        }
                        if (this.radioVal == 'gzhwzShare') {
                            if (this.url.indexOf('wxShare') != -1) {
                                this.url = this.url.replace('wxShare', 'gzhwzShare');
                            } else {
                                this.url += '?gzhwzShare=true';
                            }
                        }
                    }

                    console.log('----this.url----', this.url);
                },

                copyRes() {
                    var oInput = document.createElement('input');
                    oInput.value = this.result;
                    document.body.appendChild(oInput);
                    oInput.select(); // 选择对象
                    document.execCommand("Copy"); // 执行浏览器复制命令
                    oInput.className = 'oInput';
                    oInput.style.display = 'none';
                    this.isCopy = true;
                    setTimeout(() => {
                        this.isCopy = false;
                    }, 1000)
                }
            }
        })
    </script>
</body>

</html>